<template>
  <div>
    <section  class="recommend">
      <ul >
        <li v-for="(item, index) in list" :key="index">
          <img :src="item.img" alt="" />
          <p>{{item.name}}</p>
          <div>{{"￥"+ item.pice }}</div>
        </li>
      </ul>
    </section>
  </div>
</template>

<script>
export default {
    props:['list'],
    created() {
        console.log(this.list);
    },
};
</script>

<style lang="scss" scoped>
.recommend {
  width: 696px;
  height: 289px;
  margin-left: 28px;
  ul {
    display: flex;
    justify-content: space-between;
    li {
      width: 216px;
      height: 289px;
      background: #ffffff;
      border-radius: 16px;
      img {
        width: 216px;
        height: 195px;
      }
    }
  }
}
</style>
